<template>
    <FormLayout class="xmgl-info-wrap clearFloat">
        <div class="left-wrap">
            <el-form :ref="editFormRef" :model="formData" label-width="80px" :rules="rules" @submit.native.prevent>
                <el-form-item label="所属公司" prop="companyName">
                    <el-input readonly placeholder="未获取到公司名称" v-model="formData.companyName"/>
                </el-form-item>

                <el-form-item label="项目名称" prop="name">
                    <el-input placeholder="请输入项目名称" v-model="formData.name"/>
                </el-form-item>

                <el-form-item label="项目类型" prop="type">
                    <el-select placeholder="请选择项目类型" v-model="formData.type" style="width: 100%;">
                        <el-option label="公寓" value="gy"/>
                    </el-select>
                </el-form-item>

                <el-form-item label="所在地区" prop="area">
                    <el-select placeholder="请选择所在地区" v-model="formData.area" style="width: 100%;">
                    </el-select>
                </el-form-item>

                <el-form-item label="经纬度" prop="lnglat">
                    <el-input readonly placeholder="未获取到经纬度" v-model="formData.lnglat"/>
                </el-form-item>

                <el-form-item label="具体位置" prop="address">
                    <el-input placeholder="请输入或移动地图获取位置信息" v-model="formData.address"/>
                </el-form-item>

                <el-form-item label="客服电话" prop="phone">
                    <el-input placeholder="请输入客服电话" v-model="formData.phone"/>
                </el-form-item>

                <el-form-item label="特色标签" prop="tags">
                    <dynamic-tag v-model="formData.tags"/>
                </el-form-item>

                <el-form-item label="周边配套" prop="phone">
                    <el-input placeholder="请输入客服电话" v-model="formData.phone"/>
                </el-form-item>
            </el-form>
        </div>

        <div class="right-wrap">
            <div id="map-container"/>

            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="mapSearchText"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入内容"
                    @select="handleSelect"
            >
                <template slot-scope="{ item }">
                    <div class="name" :title="item.name">{{ item.name }}</div>
                    <span class="addr" :title="item.address + ' - ' + item.district">{{item.address}} - {{ item.district }}</span>
                </template>
            </el-autocomplete>
        </div>

        <template slot="footer">
            <el-button type="primary">保存</el-button>
            <el-button type="info" @click="$jump({name: 'xmglList'})">返回列表</el-button>
        </template>
    </FormLayout>
</template>

<script>
    export default JBoot({
        props: {},

        data() {
            return {
                mapSearchText: undefined,
                rules: {

                }
            }
        },

        computed: {},

        mounted (){
            this.__createGdMap('map-container', {
                zoom: 13
            }).then(({ Map, instance }) => {
                //使用CSS默认样式定义地图上的鼠标样式
                instance.setDefaultCursor("pointer");

                this.mapAutoComplete = new Map.Autocomplete();

                let marker, geocoder = new Map.Geocoder();

                instance.on('click', event => {
                    console.log(event);

                    marker && instance.remove(marker);

                    marker = new Map.Marker({
                        position: event.lnglat,
                    });

                    instance.add(marker);

                    this.$set(this.formData, 'lnglat', event.lnglat.lng + ',' + event.lnglat.lat);

                    geocoder.getAddress(event.lnglat, (status, result) => {
                        if (status === 'complete' && result.info === 'OK') {
                            this.$set(this.formData, 'address', result.regeocode.formattedAddress);
                        }
                    });
                });
            });
        },

        methods: {
            initFormDataInfo (responseData){
                this.$set(this, 'formData', Object.assign({}, responseData, {
                    companyId: responseData.companyId || this.$routeParams.companyId,
                    companyName: responseData.companyName || this.$routeParams.companyName
                }));
            },

            querySearchAsync (queryString, cb){
                if(queryString && this.mapAutoComplete){
                    this.mapAutoComplete.search(queryString, (status, result) => {
                        if(status === 'complete'){
                            cb(result.tips || []);
                        }else{
                            cb([]);
                        }
                    });
                }else{
                    cb([]);
                }
            },

            handleSelect (item){
                this.gdMapInstance.setCenter(item.location);
            }
        },

        watch: {}
    }).module('gd-map').form().build();
</script>

<style lang="scss">
    .xmgl-info-wrap {
        & > .content-wrap{
            & > div{
                float: left;
                height: 100%;
            }
            & > .left-wrap{
                width: 380px;
                overflow-y: auto;
            }
            & > .right-wrap{
                width: calc(100% - 390px);
                margin-left: 10px;
                box-sizing: border-box;
                border: 1px solid #eeeeee;
                border-radius: 3px;
                overflow: hidden;
                position: relative;
                & > #map-container{
                    width: 100%;
                    height: 100%;
                }
                & > .el-autocomplete{
                    position: absolute;
                    right: 10px;
                    top: 10px;
                }
            }
        }
    }

    .amap-logo, .amap-copyright{
        /*display: none !important;*/
    }

    .my-autocomplete {
        li {
            line-height: normal;
            padding: 7px;

            .name {
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .addr {
                font-size: 12px;
                color: #b4b4b4;
            }

            .highlighted .addr {
                color: #ddd;
            }
        }
    }
</style>
